<template>
  <view class="layout layout-column">
    <van-sticky>
      <van-nav-bar
        :placeholder="true"
        title="维修申请"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-button
            type="primary"
            @click="onSubmit"
            class="layout-btn"
            size="small"
            >提交</van-button
          >
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="van-list">
      <van-form>
        <van-field
          v-model="dataForm.classifyName"
          name="classifyName"
          label="故障分类"
          is-link
          readonly
          required
          @click="show = true"
        />
        <van-field
          v-model="dataForm.equipName"
          name="equipName"
          label="设备名称"
          is-link
          readonly
          required
          @click="eqShow = true"
        />
        <van-field
          v-model="dataForm.equipCode"
          name="equipName"
          label="设备编码"
          required
          readonly
        >
          <template #right-icon>
            <van-icon name="scan" color="#1989fa" @click="onScan" size="26px" />
          </template>
        </van-field>
        <van-field
          v-model="dataForm.factoryName"
          name="factoryName"
          label="所属部门"
          required
          readonly
        />
        <van-field
          v-model="dataForm.emergency"
          name="emergency"
          label="紧急度"
          is-link
          readonly
          required
          @click="emergencyShow = true"
        />
        <van-field
          v-model="dataForm.applyName"
          name="applyName"
          label="申请人"
          required
          readonly
        />
        <van-field
          readonly
          clickable
          name="faultTime"
          required
          v-model="dataForm.faultTime"
          label="故障发生时间"
          label-width="100px"
          is-link
          @click="onChangeTime('faultTime')"
        />
        <van-field
          name="faultRemark"
          rows="2"
          autosize
          type="textarea"
          v-model="dataForm.faultRemark"
          label="故障描述"
        />
      </van-form>
    </div>
    <van-popup v-model:show="show" position="bottom">
      <van-picker
        title="故障分类"
        :columns="columns"
        @confirm="onConfirmClass"
        @cancel="show = false"
      />
    </van-popup>
    <van-popup v-model:show="eqShow" position="bottom">
      <van-picker
        title="设备"
        :columns="eqColumns"
        @confirm="onEqConfirmClass"
        @cancel="eqShow = false"
      />
    </van-popup>
    <van-popup v-model:show="emergencyShow" position="bottom">
      <van-picker
        title="紧急度"
        :columns="['低', '中', '高']"
        @confirm="onEmergencyShowConfirm"
        @cancel="emergencyShow = false"
      />
    </van-popup>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker
        @confirm="confirm"
        @cancel="showPicker = false"
        v-model="checkTime"
        type="datetime"
        title="故障发生时间"
        :min-date="minDate"
      />
    </van-popup>
  </view>
</template>
      
  <script>
import {
  getGroupUser,
  report,
  getFaultClassify,
  getPermissionsEquip,
  insertOrder,
} from "@/api/home.js";
import { mapGetters, mapMutations } from "vuex";
import { Notify, Toast, Dialog } from "vant";
import dayjs from "dayjs";
export default {
  data() {
    return {
      loading: false,
      show: false,
      eqShow: false,
      userShow: false,
      showPicker: false,
      emergencyShow: false,
      timeType: "",
      customFieldName: {
        text: "classifyName",
        values: "id",
      },
      defaultIndex: [],
      value: "",
      dataForm: {
        faultTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        applyName: "",
        applyBy: "",
        emergency: "低",
      },
      checkTime: new Date(),
      minDate: new Date(2024, 0, 1),
      list: [],
      userList: [],
      columns: [],
      eqColumns: [],
      repairClassData: [],
      equipList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "dataRow"]),
  },
  onLoad() {
    this.dataForm.applyBy = this.userInfo.userId;
    this.dataForm.applyName = this.userInfo.userName;
    this.getRepairClass();
    this.getEquipList();
  },
  mounted() {
    uni.$on("scancode", (code) => {
      this.setEqField(code);
    });
  },
  methods: {
    async getEquipList() {
      const res = await getPermissionsEquip();
      this.equipList = res.data;
      this.eqColumns = res.data.map((item) => item.equipName);
    },
    // 故障分类
    async getRepairClass() {
      const res = await getFaultClassify();
      this.repairClassData = res.data;
      this.columns = res.data.map((item) => item.classifyName);
    },

    back() {
      history.back();
    },
    onSubmit() {
      if (!this.dataForm.equipName) {
        return Toast.fail("请选择设备！");
      }
      if (!this.dataForm.classifyName) {
        return Toast.fail("请选择故障分类！");
      }
      Dialog.confirm({
        title: "提示",
        message: "是否确认提交？",
      }).then(async () => {
        await insertOrder({
          ...this.dataForm,
          applyNo: "",
          id: "",
          extensionInfo: {},
        });
        Toast.success("提交成功！");
        history.back();
      });
    },
    onConfirmClass(classifyName) {
      const row = this.repairClassData.find(
        (item) => item.classifyName == classifyName
      );
      this.dataForm.classifyName = classifyName;
      this.dataForm.faultClassifyId = row.id;
      this.dataForm.faultRemark = row.remark;
      this.show = false;
    },
    onEqConfirmClass(equipName) {
      const row = this.equipList.find((item) => item.equipName == equipName);
      this.dataForm.equipName = equipName;
      this.dataForm.equipCode = row.equipCode;
      this.dataForm.factoryId = row.factoryId;
      this.dataForm.factoryName = row.factoryName;
      this.dataForm.equipId = row.id;
      this.eqShow = false;
    },
    onEmergencyShowConfirm(emergency) {
      this.dataForm.emergency = emergency;
      this.emergencyShow = false;
    },
    onChangeTime(type) {
      this.timeType = type;
      this.showPicker = true;
    },
    confirm(date) {
      this.dataForm[this.timeType] = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      this.showPicker = false;
    },
    onConfirmUser(data) {
      if (data.value.length) {
        this.defaultIndex = data.value;
        this.dataForm.userLabelList = data.value.join(",");
        this.dataForm.userList = data.selected.map((item) => {
          return {
            userName: item.label,
            userId: item.value,
          };
        });
      } else {
        this.defaultIndex = [];
        this.dataForm.userLabelList = [];
        this.dataForm.userList = [];
      }
      this.userShow = false;
    },
    onScan() {
      uni.navigateTo({
        url: `/pages/spotCheck/scancode`,
      });
    },
    setEqField(equipCode) {
      const row = this.equipList.find((item) => item.equipCode == equipCode);
      this.dataForm.equipName = row.equipName;
      this.dataForm.equipCode = row.equipCode;
      this.dataForm.factoryId = row.factoryId;
      this.dataForm.factoryName = row.factoryName;
      this.dataForm.equipId = row.id;
    },
  },
};
</script>
      
<style lang="scss" scoped>
.home {
  height: calc(100% - var(--van-tabbar-height));
  padding: 10px;
}
</style>
      